<template>
	<view class="ljapp">
		<view class="card">
			<view class="title">基本信息</view>

			<u--form labelWidth="auto" :labelStyle="{fontSize:'28rpx',color:'#333'}">
				<u-form-item label="检测编号" borderBottom>
					<view class="textr">{{obj.order_code}}</view>
				</u-form-item>
				<u-form-item label="查看二维码" borderBottom v-if="obj.oct_info&&obj.oct_info.name">
					<view class="textr">
						<view class="u-flex u-flex-end" @click="openQrcode">
							<image src="/pagesL/static/icon-qrcode.png" mode="aspectFill" style="width: 48rpx;height: 48rpx;"></image>
							<u-icon name="arrow-right" color="#40AB29"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="姓　　名" borderBottom>
					<view class="textr">{{obj.name}}</view>
				</u-form-item>
				<u-form-item label="性　　别" borderBottom>
					<view class="textr">{{obj.sex==1?'男':'女'}}</view>
				</u-form-item>
				<u-form-item label="联系方式" borderBottom>
					<view class="textr">{{obj.mobile}}</view>
				</u-form-item>
				<u-form-item label="预约日期" borderBottom>
					<view class="textr">{{obj.time}}</view>
				</u-form-item>
			</u--form>
		</view>

		<view class="card" v-if="obj.oct_info&&obj.oct_info.name">
			<view class="title">预约成功</view>

			<view class="business u-flex" @click="goNav(obj.oct_info)">
				<image class="avatar" :src="$base.cdn(obj.oct_info.pictures)" mode="aspectFill"></image>
				<view class="u-flex-fill">
					<view class="tit">{{obj.oct_info.name}}</view>
					<view class="con">
						<!-- 周一至周日9:00-12:00 13:00-18:00 -->
						营业时间：{{obj.oct_info.startTime}}-{{obj.oct_info.endTime}}
					</view>
					<view class="address">
						{{obj.oct_info.address}}
					</view>
					<view class="btn-box u-flex u-flex-end" v-if="obj.status==0">
						<view class="btn-edit" @click.stop="onOctSelect">修改</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-else>
			<view class="tip">
				温馨提示：预约信息保存成功，请您在线选择一家检测机构门店，或者到门店出示二维码。
			</view>

			<view class="btn-row" v-if="obj.status==0">
				<view class="btn-fillet" @click="onOctSelect">在线选择检测机构</view>
			</view>

			<image class="qrcode" :src="$base.img(obj.qrcode)" mode="aspectFill"></image>
		</view>
		<!-- v-if="obj.status==1" -->
		<view class="fixed-bottom-btns" >
			<view class="outer u-flex u-flex-between">
				<view class="btn" @click="openEditDate">修改时间</view>
				<view class="btn" @click="cancelOrder">取消预约</view>
				<view class="btn btn-info" @click="confirmOrder" v-if="obj.oct_info&&obj.oct_info.name||obj.status==1&&obj.downtime<=0">确认已检测</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
		
		<u-popup :show="showQrcode" :round="8" mode="center" @close="closeQrcode">
			<view class="popup-qrcode-content">
				<view class="tit">请向门店出示二维码</view>
				<view class="con"><image class="qrcode" :src="$base.img(obj.qrcode)" mode="aspectFill"></image></view>
			</view>
		</u-popup>
		
		<u-popup :show="showEditDate" :round="8" mode="center" @close="closeEditDate">
			<view class="popup-edit-content">
				<view class="tit">修改预约时间</view>
				<view class="con">
					<u--form labelWidth="auto" :labelStyle="{fontSize:'28rpx',color:'#333'}">
						<u-form-item label="预约日期">
							<view style="width: 100%;" @click="openDate">
								<u--input
									v-model="time"
									border="none"
									inputAlign="right"
									fontSize="24rpx"
									placeholderStyle="color: #c2c2c2"
									placeholder="选择日期"
									disabled
									disabledColor="transparent"
								></u--input>
							</view>
						</u-form-item>
					</u--form>
				</view>
				<view class="bottom">
					<view class="btn btn-success" @click="editDate">确定</view>
				</view>
			</view>
		</u-popup>
		
		<u-datetime-picker ref="datetimePicker" mode="date" :minDate="0" :show="showDate" v-model="dateVal" @cancel="showDate=false" @confirm="changeDate"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_code: '',

				obj: {},
				
				showQrcode: false,
				showEditDate: false,
				
				showDate: false,
				time: '',
				dateVal: Number(new Date()),
			}
		},
		onLoad(options) {
			if(options.order_code) this.order_code = options.order_code
		},
		onShow(){
			this.init()
		},
		methods: {
			//详情
			init() {
				this.$Http({
					url: 'detailsPhysicalOrdernew',
					load: false,
					data: {
						order_code: this.order_code
					},
				}).then(res => {
					this.loading = false
					if (res.code == 1 && res.data) {
						this.obj = res.data
					}
				});
			},
			onOctSelect(){
				uni.navigateTo({
					url: '/pagesL/check/octSelect?order_code='+this.order_code
				})
			},

			openQrcode(){
				this.showQrcode = true
			},
			closeQrcode(){
				this.showQrcode = false
			},
			
			openEditDate(){
				this.time = this.obj.time
				this.showEditDate = true
			},
			closeEditDate(){
				this.showEditDate = false
			},
			changeDate(e){
				this.time = this.$u.timeFormat(e.value,'yyyy-mm-dd')
				this.showDate = false
			},
			openDate(e){
				this.$refs.datetimePicker.setDate(Number(new Date(this.time.replace(/-/g,"/")).getTime()))
				this.showDate = true
			},
			editDate(){
				let that = this
				this.showDate = false
				that.showEditDate = false
				uni.showModal({
					title: '操作提示',
					confirmText: '确定',
					confirmColor: '#6ccbb6',
					cancelText: '取消',
					content: '您确定要修改预约时间吗',
					success: function(res) {
						
						if (res.confirm) {
							that.changeDate1(that.time)
							
						}
					}
				});
			},
			changeDate1(e) {
				let that = this
				var date1 = new Date();
				var date2 = new Date();
				date2.setDate(date1.getDate() + 6);
				var time1 = this.$u.timeFormat(e, 'yyyy-mm-dd')
				var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
				
				if(this.compareDate(time1,time2)){
					that.$Http({
						url: 'editDatePhysicalOrdernew',
						show: true,
						data: {
							order_code: that.obj.order_code,
							time: that.time
						},
						type: 'post',
					}).then(res => {
						if (res.code == 1) {
							that.$u.toast(res.msg)
							that.init()
						}
					});
				}else{
					return this.$u.toast('只能预约七日内的检查~')
				}
			
				
			},
			compareDate(date1, date2) {
				console.log(date1, date2,'7777')
				// 1.转为时间戳
				var data1 = Date.parse(date1.replace(/-/g, "/"));
				var data2 = Date.parse(date2.replace(/-/g, "/"));
				// 2.时间戳间隔 再加上一天+ 86400000
				var datadiff = data2 - data1 ;
				// 3.七天间隔
				var time = 6 * 24 * 60 * 60 * 1000;
				// 4.比较两个日期的远近，date2为最近的日期
				if (data1 > data2) {
					return false;
				} else {
					// 当间隔日期大于 规定的7天
					console.log(datadiff , time,'456')
					if (datadiff > time) {
						return false;
					} else {
						return true
					}
				}
			},
			cancelOrder(){
				let that = this
				uni.showModal({
					title: '操作提示',
					confirmText: '确定',
					confirmColor: '#6ccbb6',
					cancelText: '取消',
					content: '您确定要取消吗',
					success: function(res) {
						if (res.confirm) {
							that.$Http({
								url: 'cancelPhysicalOrdernew',
								show: true,
								data: {
									order_code: that.obj.order_code
								},
								type: 'post',
							}).then(res => {
								if (res.code == 1) {
									that.$u.toast(res.msg)
									that.init()
								}
							});
						}
					}
				});
			},
			confirmOrder(){
				let that = this
				uni.showModal({
					title: '操作提示',
					confirmText: '确定',
					confirmColor: '#6ccbb6',
					cancelText: '取消',
					content: '您确定已检测吗',
					success: function(res) {
						if (res.confirm) {
							that.$Http({
								url: 'confirmPhysicalOrdernew',
								show: true,
								data: {
									order_code: that.obj.order_code
								},
								type: 'post',
							}).then(res => {
								if (res.code == 1) {
									that.$u.toast(res.msg)
									that.init()
								}
							});
						}
					}
				});
			},

			goNav(item){
				if(!item.lat || !item.lng) return false
				
				// uni.navigateTo({
				// 	url: '/pagesL/check/octMap',
				// })
				// return false;

				uni.openLocation({
					latitude: parseFloat(item.lat),
					longitude: parseFloat(item.lng),
					success: function (e) {
						console.log('goNav success', e);
					},
					fail: function (e) {
						console.log('goNav fail', e);
					},
				})
			},
		}
	}
</script>

<style lang="less">
	@import '@/pagesB/style.less';

	.ljapp{
		padding-top: 2rpx;
	}
	.card{
		margin: 20rpx;
		padding-top: 26rpx;
		padding-left: 16rpx;
		padding-right: 15rpx;
		padding-bottom: 40rpx;

		.title{
			position: relative;
			padding-left: 34rpx;
			height: 42rpx;
			line-height: 42rpx;
			font-weight: 500;
			margin-left: 20rpx;
			margin-bottom: 10rpx;

			&:after{
				position: absolute;
				top: 0;
				left: 0;
				content: '';
				width: 6rpx;
				height: 42rpx;
				border-radius: 42rpx;
				background-color: #12b3f1;
				overflow: hidden;
			}
		}

		/deep/.u-form-item__body{padding: 24rpx 0 22rpx;}
		/deep/.u-form-item__body__left{padding-left: 52rpx!important;}
		/deep/.u-line{
			border-color: #f5f5f5!important;
			border-width: 2px!important;
		}
		/deep/.u-form-item__body__right__content{padding-right: 54rpx;}
		/deep/.u-form-item__body__left__content__required{font-weight: 700;left:-24rpx;color:#ff0707;}

		/deep/.u-radio{margin-left: 34rpx;}

		/deep/.u-textarea{
			padding: 10rpx 24rpx;
			padding-right: 18rpx;
		}

		/deep/.u-upload{padding-left: 28rpx;}
		/deep/.u-upload__button{margin: 0;border-radius: 10rpx;background-color: #f1f1f1;width: 192rpx!important;height: 174rpx!important;
			.u-icon__icon{
				font-size: 70rpx!important;
			}
		}
		/deep/.u-upload__button__text{font-size: 22rpx; color: #999;}
	}

	.content{
		padding: 0 20rpx 20rpx;
	}
	.tip{
		background-color: #daf2f9;
		color: #00b7ee;
		padding: 30rpx 44rpx;
		border-radius: 6rpx;
	}
	.btn-fillet{
		width: 370rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		color: #fff;
		border-radius: 10rpx;
		background-color: #12b3f1;
		box-shadow: 0 6rpx 6rpx #ace0f3;
		margin: 30rpx auto 0;
	}

	.textr{
		width: 100%;
		text-align: right;
	}

	.qrcode{
		display: block;
		width: 260rpx;
		height: 260rpx;
		margin: 56rpx auto 0;
	}

	.business{
		border-top: 2rpx solid #f5f5f5;
		padding: 40rpx 20rpx 0;
		margin-top: 26rpx;
		.avatar{
			display: block;
			width: 150rpx;
			min-width: 150rpx;
			height: 142rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.tit{}
		.con,.address{
			font-size: 22rpx;
			color: #c2c2c2;
		}
		.con{
			margin-top: 18rpx;
		}
		.address{
			margin-top: 14rpx;
		}
		.btn-box{
			padding-right: 40rpx;
		}
		.btn-edit{
			width: 112rpx;
			height: 54rpx;
			line-height: 50rpx;
			border-radius: 6rpx;
			border: 2rpx solid #a7e2fa;
			color: #00b7ee;
			text-align: center;
		}
	}

	.popup-qrcode-content{
		width: 535rpx;
		padding: 0 28rpx 83rpx;
		.tit{
			text-align: center;
			padding: 40rpx 0 32rpx;
			border-bottom: 1px solid #D5D5D5;
			font-size: 34rpx;
			font-weight: 500;
		}
		
		.qrcode{
			width: 313rpx;
			height: 313rpx;
			margin-top: 53rpx;
		}
	}
	.popup-edit-content{
		width: 535rpx;
		padding: 0 28rpx 33rpx;
		.tit{
			text-align: center;
			padding: 40rpx 0 32rpx;
			border-bottom: 1px solid #D5D5D5;
			font-size: 34rpx;
			font-weight: 500;
		}
		
		.bottom{
			border-top: 1px solid #D5D5D5;
			padding-top: 32rpx;
		}
		.btn{
			width: 165rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #fff;
			border-radius: 6rpx;
			color: #999;
			margin: 0 auto;
			font-size: 32rpx;
			
			&.btn-success{
				background-color: #19A752;
				color: #fff;
			}
		}
	}
	
	.fixed-bottom-btns{
		.fixed-placeholder{
			height: 168rpx;
		}
		.outer{
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			box-shadow: 0 0rpx 15rpx #ccc;
			padding: 42rpx 44rpx;
			
			.btn{
				width: 196rpx;
				height: 80rpx;
				line-height: 76rpx;
				border: 2rpx solid #B5B5B5;
				background-color: #fff;
				border-radius: 6rpx;
				color: #999;
				margin: 0;
				font-size: 32rpx;
				
				&.btn-info{
					border-color: #00B7EE;
					background-color: #00B7EE;
					color: #fff;
				}
			}
		}
	}
</style>
